<template>
  <el-dialog :visible.sync="visible"
             width="750px"
             title="搜索"
             :lock-scroll="false"
             :close-on-click-modal="false"
             @closed="closed">
    <el-input v-model="query.q"
              placeholder="请输入搜索关键词"
              @keyup.enter.native="fetch"
              clearable>
      <el-button slot="append"
                 icon="el-icon-search"
                 @click="fetch"></el-button>
    </el-input>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      query: {
        q: undefined,
      }
    }
  },
  methods: {
    open (q = undefined, immediate = false) {
      this.q = q
      this.visible = true
      immediate && this.fetch(this.query)
    },
    fetch (page) {
      location.href = `/search?q=${this.query.q}`;
    },
    closed () {
      this.query.q = undefined
    }
  }
}
</script>

<style lang="scss" scoped>
.search-content__body {
  margin-top: 8px;
}
/deep/.el-dialog__body {
  padding-top: 20px;
}
</style>